var sampleData = [
{
"Columna1" : "Item1-Columna1",
"Columna2" : "Item1-Columna2",
"Columna3" : "Item1-Columna3",
"Columna4" : "Item1-Columna4",
"Columna9" : "9999999999",
"Columna5" : "Item1-Columna5"
},
{
"Columna1" : "Item2-Columna1",
"Columna2" : "Item2-Columna2",
"Columna3" : "Item2-Columna3",
"Columna4" : "Item2-Columna4",
"Columna5" : "Item2-Columna5"
},
{
"Columna1" : "Item3-Columna1",
"Columna2" : "Item3-Columna2",
"Columna3" : "Item3-Columna3",
"Columna4" : "Item3-Columna4",
"Columna5" : "Item3-Columna5"
},
{
"Columna1" : "Item4-Columna1",
"Columna2" : "Item4-Columna2",
"Columna3" : "Item4-Columna3",
"Columna4" : "Item4-Columna4",
"Columna9" : "9999999999",
"Columna5" : "Item4-Columna5"
},
{
"Columna1" : "Item5-Columna1",
"Columna2" : "Item5-Columna2",
"Columna3" : "Item5-Columna3",
"Columna4" : "Item5-Columna4",
"Columna5" : "Item5-Columna5"
},
{
"Columna1" : "Item6-Columna1",
"Columna2" : "Item6-Columna2",
"Columna3" : "Item6-Columna3 asdf asdf asdf asdf asdfa sdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf",
"Columna4" : "Item6-Columna4",
"Columna5" : "Item6-Columna5"
},
{
"Columna1" : "Item7-Columna1",
"Columna2" : "Item7-Columna2",
"Columna3" : "Item7-Columna3",
"Columna4" : "Item7-Columna4",
"Columna5" : "75",
"Columna9" : "9999999999"
},
{
"Columna1" : "Item8-Columna1",
"Columna2" : "Item8-Columna2",
"Columna3" : "Item8-Columna3",
"Columna4" : "Item8-Columna4",
"Columna5" : "85"
},
{
"Columna1" : "Item9-Columna1",
"Columna2" : "Item9-Columna2",
"Columna3" : "Item9-Columna3",
"Columna4" : "Item9-Columna4",
"Columna5" : "19595.85"
},
{
"Columna1" : "Item0-Columna1",
"Columna2" : "Item0-Columna2",
"Columna3" : "Item0-Columna3",
"Columna4" : "Item0-Columna4",
"Columna5" : "0.5",
"Columna9" : "9999999999"
}]


var xwrtGrid = function (el) {
	var that = this;
	var myParent = el.parentNode;
	var myId = el.getAttribute("id") || "grid_"+el.getAttribute("xWrtId");
	var table = document.createElement("table");
	var main_div = document.createElement("div");
	var title_div = document.createElement("div");
	var data_div = document.createElement("div");
	var foot_div = document.createElement("div");
//	var scroll_d = document.createElement("div");
	var ttable = document.createElement("table");
	var TH_el = el.getElementsByTagName("TH");
	var className = el.getAttribute("class");
	main_div.style.styleFloat = el.style.styleFloat;
	main_div.style.cssFloat = el.style.cssFloat;
	main_div.style.position = el.style.position;
	main_div.style.height = el.style.height;
	main_div.style.overflow = el.style.overflow;
	this.id=myId;
	this.data = []; //sampleData;
	var cols = [];
	var mainWidth = el.style.width || el.getAttribute("width") || false;
	var mainHeight= el.style.height || el.getAttribute("height") || false;
	var storeId = el.getAttribute("storeId");
	var filterFn = el.getAttribute("filterFn");
	var tableColsWidth = 0;

	var waitdiv = loadingDataPopUp();
	// Rows events
	var onRowClick = el.getAttribute("onRowClick") ? eval(el.getAttribute("onRowClick")) : null;
	var onRowOver =  el.getAttribute("onRowOver") ? eval(el.getAttribute("onRowOver")) : null;
	var onRowOut = el.getAttribute("onRowOut") ? eval(el.getAttribute("onRowOut")) : null;
	// Cell events
	var onCellClick = el.getAttribute("onCellClick") ? eval(el.getAttribute("onCellClick")) : null;
	var onCellOver = el.getAttribute("onCellOver") ? eval(el.getAttribute("onCellOver")) : null;
	var onCellOut = el.getAttribute("onCellOut") ? eval(el.getAttribute("onCellOut")) : null;
	var color = "#aabbcc";

	if (typeof(xwrt[storeId].rows) == "undefined"){
		xwrt[storeId].rows = new Array();
	}

	title_div.style.overflow = "hidden";
	table.id = myId+"_table";
	ttable.id = myId+"_title";
	table.cellSpacing=el.getAttribute("celspacing") || "2";
	ttable.cellSpacing=table.cellSpacing;
	title_div.appendChild(ttable);

// Titles
	var newrow = ttable.insertRow(0);
	newrow.id = myId+"_title_row:0";
	for(var i=0;i<TH_el.length;i++){
		var cEl = TH_el[i];
		var newReg = {}
		newReg.field = cEl.getAttribute("field") || "Missing Field";
		newReg.width = cEl.style.width || cEl.getAttribute("width") || "auto";
		if (newReg.width.indexOf('%')==-1){
			if (newReg.width!="auto"){
				newReg.width = parseFloat(newReg.width);
				tableColsWidth += newReg.width;
				newReg.width=newReg.width+"px";
			}
			tableColsWidth += ((table.cellSpacing) ? parseFloat(table.cellSpacing) : 0);
		}
		newReg.align = cEl.style.align || cEl.getAttribute("align") || "auto";
		newReg.title = cEl.innerHTML || newReg.field;
		cols.push(newReg);
		var myCell = newrow.insertCell(i);
		myCell.id=newrow.id+":"+newReg.field;
		myCell.style.backgroundColor="#ccbbaa";
		myCell.innerHTML=newReg.title;
//		alert(newReg.title+" width:"+newReg.width);
		myCell.style.width=newReg.width;
		myCell.style.overflow="hidden";
		myCell.style.textAling=newReg.align;
	}

	this.loadingData = function () {
		waitdiv.style.display = "block";
	}
	this.loadedData = function () {}
	this.interactiveData = function () {}
	this.completeData = function () {
		if (filterFn){
			var myfunc = eval(filterFn);
			this.data = myfunc(xwrt[storeId].rows);
		} else {
			this.data = xwrt[storeId].rows;
		}
		for (var i=0; i<this.data.length;i++){
			this.showData(i);
		}
		this.resizeGrid();
		waitdiv.style.display="none";
	}
	this.doData = function () {
		if (xwrt[storeId].onEventFunctions){
			xwrt[storeId].onEventFunctions.push(this);
			if (xwrt[storeId].readyState == 0){
				xwrt[storeId].update();
			}

		} else {
			this.completeData();
			waitdiv.style.display="none";
		}
	}
	this.toString=function(){ return main_div.innerHTML }	
	this.resizeGridCols = function (intreg){
		var reg = parseFloat(intreg) || 0;
//alert("resizeGridCols "+this.id+"\nRegistro :"+reg);
		var widthFree = (VscrollDetect(main_div)) ? free_width(main_div)-19 : free_width(data_div);
//		var widthFree = (VscrollDetect(main_div)) ? mainWidth-19 : mainWidth;
		table.width=(tableColsWidth > data_div.clientWidth) ? tableColsWidth : widthFree+"px";
		ttable.width=table.width;
		if (table.rows.length>0){
			for(var i=0; i<cols.length;i++){
				table.rows[reg].cells[i].style.width = ttable.rows[0].cells[i].clientWidth + "px";
			}
			for (var i=0;i<cols.length;i++){
				ttable.rows[0].cells[i].style.width=(table.rows[reg].cells[i].clientWidth)+"px";
				if(table.rows[reg].cells[i].style.textAlign) ttable.rows[0].cells[i].style.textAlign=table.rows[reg].cells[i].style.textAlign;
			}
		}
	}
	this.insertData = function (data){
		var reg = this.data.length;
		if (typeof(data.xwrtStatus)=="undefined"){
			data.xwrtStatus = new Array();
		}
		data.xwrtStatus.push("new");
		this.data.push(data);
		this.showData(reg);
		this.resizeGridCols(reg);
		return reg;
	}
	this.reShowData = function () {
		for (var i=0;i<this.data.length;i++){
			for (var n=0;n<cols.length;n++){
				document.getElementById(myId+"_row:"+i+":"+cols[n].field).innerHTML=this.data[i][cols[n].field];
			}
		}
	}
	this.resetTable = function () {
//alert("resetTable "+this.id);
		var mytabla = document.getElementById(myId+"_table");
		while (mytabla.rows.length>0){ //deletes all rows of a table
			mytabla.deleteRow(0);
		}
		for (var i=0; i<this.data.length;i++){
			this.showData(i);
		}
		this.resizeGridCols();
	}
	this.showData = function (i) {
		var newrow = table.insertRow(i);
		newrow.className = "packages";
		newrow.gridId=myId;
		newrow.id=myId+"_row:"+i;
		newrow.storeId = storeId;
		newrow.data=this.data[i];
		newrow.gridData=this.data;
		addEvent(newrow, "mouseover", function() { this.style.backgroundColor="#ffcccc";} );
		if (onRowOver) {addEvent(newrow, "mouseover", onRowOver );}
		if (onRowOut) {addEvent(newrow, "mouseout", onRowOut );}
		if (onRowClick) { addEvent(newrow, "click", onRowClick ); newrow.style.cursor="hand"; }
		if (color == "#ccddee"){
			addEvent(newrow, "mouseout",  function() { this.style.backgroundColor="#aabbcc";} );
			color = "#aabbcc";
		} else {
			addEvent(newrow, "mouseout",  function() { this.style.backgroundColor="#ccddee";} );
			color = "#ccddee";
		}
		newrow.style.backgroundColor=color;
		for (var n=0;n<cols.length;n++){
			var myCell = newrow.insertCell(n);
			myCell.storeId = storeId;
			myCell.gridId=myId;
			myCell.rowId=newrow.id;
			myCell.id = newrow.id+":"+cols[n].field;
			if (cols[n].align=="auto"){
				if (isNumeric(this.data[i][cols[n].field])){
					myCell.style.textAlign="right";
					ttable.rows[0].cells[n].style.textAlign=myCell.style.textAlign;
				}
			} else {
				myCell.style.textAlign=cols[n].align
			}
			myCell.innerHTML = this.data[i][cols[n].field];
		}
	}
	this.resizeGrid = function (){
//alert("resizeGrid "+this.id);
		var bodyOverflow = document.body.style.overflow;
		document.body.style.overflow="hidden";
		if (mainWidth!==false) {
			main_div.style.width = (isNumeric(mainWidth)) ? mainWidth+"px" : mainWidth;
		} else {
			main_div.style.width = free_width(main_div)+"px";
		}
		if (mainHeight!==false){
			main_div.style.height = (isNumeric(mainHeight)) ? mainHeight+"px" : mainHeight;
		} else {
			main_div.style.height = free_height(main_div)+"px";
		}
		that.resizeGridCols();
		data_div.style.height=parseFloat(free_height(data_div))-parseFloat(used_height(foot_div))-parseFloat(used_height(title_div))+"px";
		title_div.style.width=data_div.clientWidth+"px";
		document.body.style.overflow=bodyOverflow;
	}
	this.hScroll = function (){
		title_div.style.width = data_div.clientWidth+"px";
		var sLeft = document.getElementById(myId+"_data").scrollLeft;
		document.getElementById(myId+"_title").scrollLeft=sLeft;
	}

	main_div.id = myId+"_main";
	main_div.style.position="relative";
	main_div.style.overflow="hidden";
	title_div.id = myId+"_title";

	data_div.id = myId+"_data";
	main_div.appendChild(waitdiv);
	data_div.appendChild(table);
	data_div.style.overflow="auto";
	data_div.style.position="relative";
	
	foot_div.id = myId+"_footer";
	foot_div.style.height="0";
	foot_div.style.position="absolute";
	foot_div.style.bottom="0px";
	foot_div.style.left="0px";
	waitdiv.style.display="block";

	main_div.appendChild(title_div);
	main_div.appendChild(data_div);
	myParent.replaceChild(main_div,el);

////////
	this.doData();
////////
	addEvent(window, "resize", this.resizeGrid);
	addEvent(main_div, "scroll", this.hScroll);
}
